<template>
	<view class="root-massage">
		<view class="root-top">
			<h3>{{taohuo.name}}</h3>
			<span class="root-top-type">{{taohuo.state}}</span>
			<span class="root-top-money">￥{{taohuo.money}}</span>
			<p>
				这个文具盒陪我很多年了，一直舍不得扔。忍痛卖出，有要的联系我
				这个文具盒陪我很多年了，一直舍不得扔。忍痛卖出，有要的联系我
				这个文具盒陪我很多年了，一直舍不得扔。忍痛卖出，有要的联系我
			</p>
			<span class="root-top-time">发布时间{{taohuo.time}}</span>
		</view>
		<view class="root-center" @click="goXiangqing">
			<view class="center-item">
				<img src="../../../static/image/Square/wen01.jpg" alt="">
			</view>
			<view class="center-item">
				<img src="../../../static/image/Square/wen02.jpg" alt="">
			</view>
			<view class="center-item">
				<img src="../../../static/image/Square/wen03.jpg" alt="">
			</view>
		</view>
		<view class="root-bottom">
			<view class="root-bottom-left">
				<img src="../../../static/image/Square/tou.jpg" alt="">
				<h4>{{taohuo.user}}</h4>
			</view>
			<view class="root-bottom-right">
				<view class="right-item">
					<u-icon name="thumb-up" color="#ccc" size="18"></u-icon>
					<p>123</p>
				</view>
				<view class="right-item">
					<u-icon name="eye" color="#ccc" size="18"></u-icon>
					<p>123</p>
				</view>
				<view class="right-item">
					<u-icon name="more-circle" color="#ccc" size="18"></u-icon>
					<p>123</p>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:["taohuo"],
		data(){
			return{}
		},
		methods:{
			goXiangqing(){
				uni.navigateTo({
					url:"/pages/Square/pages/Thxiangqing"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.root-massage{
	margin: 30upx auto;
	width: 94%;
	height: 480upx;
	border-radius: 20upx;
	border: 1upx solid #cccccc;
	.root-top{
		height: 150upx;
		position: relative;
		h3{
			height: 50upx;
			margin-top: 20upx;
			padding-left: 30upx;
			line-height: 50upx;
			font-size: 35upx;
		}
		.root-top-type{
			font-size: 16upx;
			padding: 5upx 20upx;
			margin-left: 30upx;
			border: 1upx solid #28d2d1;
			color: #28d2d1;
		}
		.root-top-money{
			font-size: 16upx;
			padding: 2upx 20upx;
			margin-left: 15upx;
			border: 1upx solid #ff7098;
			color: #ff7098;
		}
		p{
			font-size: 30upx;
			height: 55upx;
			line-height: 55upx;
			padding-left: 30upx;
			color: #cccccc;
			//这三行样式设置文字的溢出隐藏效果
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.root-top-time{
			position: absolute;
			top: 20upx;
			right: 20upx;
			font-size: 16upx;
			color: #cccccc;
		}
	}
	.root-center{
		height: 210upx;
		border-bottom: 1upx solid #cccccc;
		display: flex;
		.center-item{
			width: 200upx;
			margin: auto;
			img{
				width: 100%;
			}
		}
	}
	.root-bottom{
		height: 100upx;
		.root-bottom-left{
			width: 350upx;
			height: 100upx;
			float: left;
			img{
				height: 80%;
				margin-top: 10upx;
				margin-left: 20upx;
				float: left;
			}
			h4{
				float: left;
				font-size: 12upx;
				margin-left: 10upx;
				line-height: 100upx;
			}
		}
		.root-bottom-right{
			width: 300upx;
			height: 100upx;
			float: right;
			.right-item{
				margin: 45upx 5upx 0 5upx;
				width: 90upx;
				height: 40upx;
				float: left;
				position: relative;
				p{
					font-size: 18upx;
					color: #ccc;
					position: absolute;
					top: 0;
					right: 0;
				}
			}
		}
	}
}
</style>